$(function () {
    // 加载layui的form表单模块
    var form = layui.form;
    // var id = location.search.replace(/\D/g, '');
    var id = location.search.substr(4);
    // 发送ajax请求  根据id获取文章详情  应该等分类请求完毕后再发送请求赋值  因为是异步请求  所以请求是随机的  可能会造成有时候数据显示不了



    // 发送ajax请求  获取分类 通过模板引擎渲染到页面中去
    $.ajax({
        url: '/my/article/cates',
        type: 'GET',
        success: function (backData) {
            // console.log(backData);
            // 调用模板引擎  渲染到页面中去
            var res = template('tpl-category', backData);
            $('select').html(res);
            // 请求成功后就要调用form模块的render 渲染下拉框
            form.render('select');

            // 保证分类渲染完毕了，再去请求文章，然后为表单赋值
            // 根据id获取当前这篇文章详情
            $.ajax({
                url: '/my/article/' + id,
                type: 'GET',
                success: function (backData) {
                    // 快速为表单赋值
                    form.val('edit-form', backData.data)
                    // 图片，需要我们自己去处理，就是更换一下剪裁区的图片
                    $image.cropper('destroy').attr('src', 'http://www.liulongbin.top:3007' + backData.data.cover_img).cropper(options);

                    // 等为表单赋值之后，然后在生成富文本编辑器  这样内容就会显示出来  不会出现偶尔数据不显示情况
                    // ------------------ 富文本编辑器替换内容区 ---------------
                    // 1. 修改内容区的多行文本域的name为content
                    // 2. 调用 initEditor()
                    initEditor();
                }
            });
        }
    });



    // ----------剪裁区图片的处理
    // 实现基本的剪裁效果（三个步骤）
    // 1. 初始化图片剪裁器
    var $image = $('#image');
    // 2. 剪裁选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview',
        autoCropArea: 1
    };
    // 初始化剪裁区域
    $image.cropper(options);
    // 点击按钮 可以选择图片
    $('.image-btn').on('click', function () {
        $('#file').trigger('click');
    });
    // 文件的地址改变 可以更换图片
    $('#file').change(function () {
        // 首先找到文件对象
        var fileObj = this.files[0];
        // 创建临时的url
        var url = URL.createObjectURL(fileObj);
        // 将临时url地址更换到剪裁区
        $image.cropper('destroy').attr('src', url).cropper(options);
    });
    // 处理两个按钮
    // 设置一个变量存储已发布和草稿  点击按钮的时候 改变变量s的值
    var s = '已发布';
    $('button:contains("发布")').click(function () {
        s = '已发布'
    });
    $('button:contains("存为草稿")').click(function () {
        s = '草稿';
    });



    // ---------  表单监听事件  发送ajax  发布文章  
    $('form').on('submit', function (e) {
        e.preventDefault();
        // 收集表单中的数据  FormData 是根据表单中的name属性手机数据的
        var data = new FormData(this);
        // 获取的只有三个值 title cate_id  content  所以剩下的state cover_img需要动态添加
        data.append('state', s);
        // 剪裁图片 得到canvas画布d
        var canvas = $image.cropper('getCroppedCanvas', {
            width: 400,
            height: 280
        });
        data.append('Id', id);
        // 更新内容
        data.set('content', tinyMCE.activeEditor.getContent());
        // 转换成二进制格式
        canvas.toBlob(function (blob) {
            data.append('cover_img', blob);
            // 发送ajax请求  发表文章  放入到这个函数内部  因为在外面得不到blob这个形参的参数
            $.ajax({
                url: '/my/article/edit',
                type: 'POST',
                // 因为是FormData要添加两个选项
                contentType: false,
                processData: false,
                data: data,
                success: function (backData) {
                    layer.msg(backData.message);
                    console.log(backData);
                    if (backData.status == 0) {
                        location.href = '/article(文章模块)/list(文章列表).html';
                    };
                }
            });
        });

    })


})